<template>
  <div
    style="display:inline-block;"
    class="topbar-menu-item language-list"
  >
    <div class="abp-flex-row">
      <i
        :class="currentLanguage.icon"
        style="margin-right:5px"
      />
      <el-dropdown
        trigger="click"
        @command="setLanguage"
      >
        <span class="el-dropdown-link">
          {{ currentLanguage.displayName }}<i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in languages"
            v-show="item.name!==currentLanguage.name"
            :key="index"
            :command="item.name"
          >
            <div class="abp-flex-row">
              <i :class="item.icon" /><span style="margin-left:5px">{{ item.displayName }}</span>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>

</template>

<script>
export default {
  name: 'ChangeLanguage',
  computed: {
    languages() {
      return abp.localization.languages.filter(val => {
        return !val.isDisabled
      })
    },
    currentLanguage() {
      return abp.localization.currentLanguage
    }
  },
  methods: {
    async setLanguage(command) {
      const changeLanguageInput = {
        languageName: command
      }
      await this.$store.dispatch({
        type: 'profile/changeLanguage',
        data: changeLanguageInput
      })
    }
  }
}
</script>

<style>
.abp-flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.language-list {
  margin-left: 10px;
  cursor: pointer;
}

.language-list .el-dropdown-link {
  font-size: 12px;
  color: #2d8cf0 !important;
}
</style>
